<template>
  <div class="assign-network">
    <search-table
      :columns="columns"
      :data="teamList"
      @change-page="changePageNow"
      @change-size="changePageSize"
      :total="total"
      :page.sync="pageIndex"
      :size.sync="pageSize"
    >
      <template slot="button-group">
        <Button
          type="primary"
          ghost
          :disabled="disabledAllBtn"
          @click="handleRelieve"
          icon="md-options"
          v-if="progress == 4 && type === 5"
          >一键解除外网IP占用</Button
        >
        <!-- <Poptip
                    confirm
                    title="你确定要解绑这些队伍吗"
                    transfer
                    @on-ok="batchUnbundleNetwork">
                    <Button
                        type="error"
                        ghost
                        :disabled="disabledAllBtn || checkedIds.length === 0"
                        icon="ios-trash-outline">批量解绑</Button>
                </Poptip> -->
      </template>
      <template slot="select-group">
        <!-- <span>请选择团队</span> -->
        <Select filterable
          v-model="teamName"
          placeholder="请选择团队"
          filterable
          clearable
          @on-change="changePageNow(1)"
        >
          <Option
            v-for="item in dataList"
            :value="item.teamName"
            :key="item.id"
            :title="item.teamName"
            >{{ item.teamName }}</Option
          >
        </Select>
      </template>
    </search-table>
    <Modal
      v-model="outerModal"
      title="外网ip切换"
      :mask-closable="false"
      :width="600"
      @on-cancel="cancel"
    >
      <Form
        ref="numberFormRef"
        :model="outerNumberForm"
        :rules="outerNumberRules"
        :label-width="100"
      >
        <FormItem label="外网ip:" prop="sceneId">
          <Select filterable v-model="outerNumberForm.sceneId" placeholder="请选择外网ip" filterable clearable>
            <Option v-for="(item, index) in outerNumberList" :value="item.id" :key="index">{{
              `${item.teamName}-${item.publicIpAddress}`
            }}</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancel">取消</Button>
        <Button @click="saveSwitch" type="primary" :loading="outerNetFrom.loading">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import SearchTable from '@/components/SearchTable/SearchTable'
import { queryTeamList, querySwitchIpList, switchOuterIp, unbundleIp } from '@/api/teamStatistics'
import { getaccessgrouplistdis } from '@/api/access_new'

export default {
  name: 'teamStatistics',
  components: {
    SearchTable
  },
  // mixins: [teamMixin],
  props: {
    disabledAllBtn: {
      type: Boolean,
      default: false
    },
    progress: {
      type: Number,
      default: 0
    },
    refreshdata: {
      type: Function,
      required: false
    },
    type: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      teamName: '',
      outerModal: false,
      total: 0, // 总数据量
      pageSize: 10, // 分页大小
      pageIndex: 1, // 当前页

      teamList: [],
      columns: [
        {
          placement: 'top-left',
          title: '名称',
          key: 'teamName',
          align: 'center',
          tooltip: true,
          width: 230
        },
        {
          title: '当前Ip',
          width: 150,
          key: 'publicIpAddress',
          tooltip: true
        },
        {
          title: '分配Ip',
          width: 300,
          tooltip: true,
          key: 'ips',
          filter: (ips) => ips.join(' - '),
          show: () => this.type === 5
          // render: (h, params) => {
          //    const ipArray = params.row.ips;
          //   return h(
          //     "Tooltip",
          //     {
          //       props: {
          //         "max-width": "300",
          //         transfer: true,
          //         content: ipArray.join(" - "),
          //       },
          //       style: {
          //         width: "100%",
          //       },
          //     },
          //     [
          //       h(
          //         "p",
          //         {
          //           style: {
          //             overflow: "hidden",
          //             "text-overflow": "ellipsis",
          //           },
          //         },
          //         ipArray.join(" - ")
          //       ),
          //     ]
          //   );
          // },
        },

        {
          placement: 'top-right',
          title: '绑定状态',
          width: 70,
          key: 'createTime',
          show: () => this.type === 5,
          render: (h, params) => {
            let status = params.row.status
            return h(
              'Tag',
              {
                props: {
                  color:
                    status == 1
                      ? 'var(--status-yes)'
                      : status == 2
                      ? 'var(--status-no)'
                      : status == 3
                      ? 'var(--status-ing)'
                      : ''
                }
              },
              status == 1 ? '已绑定' : status == 2 ? '失败' : status == 3 ? '正在切换' : ''
            )
          }
        },
        {
          title: '操作',
          key: 'action',
          placement: 'top-right',
          width: 60,
          show: () => this.type === 5,
          opList: [
            {
              txt: '切换',
              disabled: (data) => this.disabledAllBtn || data.status == 3,
              on: {
                click: (data) => {
                  this.handleSwitchIp(data.sceneId, data.teamId, data.id)
                }
              }
            }
            // {
            //   txt:'解除占用',
            //   tooltip:true,
            //   title:"确定解除占用？",
            //   on: {
            //     "click": (data) => {
            //       this.resetNetwork(data.instanceId);
            //     },
            //   },
            // }
          ]
          // render: (h, params) => {
          //   return h("div", [
          //     h(
          //       "Button",
          //       {
          //         props: {
          //           type: "error",
          //           size: "small",
          //           // disabled: this.disabledAllBtn || !params.row.success
          //         },
          //         on: {
          //           click: () => {
          //             this.handleSwitchIp(
          //               params.row.sceneId,
          //               params.row.teamId,
          //               params.row.id
          //             );
          //           },
          //         },
          //         style: {
          //           marginRight: "5px",
          //         },
          //       },
          //       "切换"
          //     ),
          //     h(
          //       "Poptip",
          //       {
          //         // props: {
          //         //     confirm: true,
          //         //     type: 'error',
          //         //     size: 'large',
          //         //     title: '你确定要重置吗',
          //         //     transfer:true
          //         // },
          //         on: {
          //           "on-ok": () => {
          //             this.resetNetwork(params.row.instanceId);
          //           },
          //         },
          //       },
          //       [
          //         h(
          //           "Button",
          //           {
          //             props: {
          //               type: "primary",
          //               size: "small",
          //               // disabled: this.disabledAllBtn
          //             },
          //             style: {
          //               marginRight: "5px",
          //             },
          //           },
          //           "解除占用"
          //         ),
          //       ]
          //     ),
          //   ]);
          // },
        }
      ],
      outerNumberForm: {
        sceneId: ''
      },
      outerNumberRules: {
        sceneId: [
          {
            required: true,
            message: '不能为空',
            trigger: 'change'
          }
        ]
      },
      outerNetFrom: {
        loading: false
      },
      outerNumberList: [],
      oldId: '',
      pollingInterval: null,
      dataList: []
    }
  },
  mounted() {
    this.getTeamList()
    this.startPolling()
    this.getQueryTeamList()
  },
  computed: {},
  methods: {
    getQueryTeamList() {
      getaccessgrouplistdis(
        {
          pageIndex: 1,
          pageSize: 9999,
          isSuperGroup: false
        },
        this.$route.query.id
      ).then((res) => {
        const filter = res.data.items.filter((item) => item.teamName !== '目标方管理员组')
        this.dataList = filter
      })
    },
    //切换
    handleSwitchIp(sceneId, teamId, oldId) {
      this.oldId = oldId
      this.outerModal = true
      querySwitchIpList(sceneId, teamId)
        .then((data) => {
          this.outerNumberList = data.data
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //查询列表
    getTeamList() {
      queryTeamList(this.$route.query.id, {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        teamName: this.teamName
      })
        .then((data) => {
          this.teamList = data.data.items
          this.total = data.data.total
        })
        .catch(() => {})
    },

    // 修改分页大小
    changePageSize(val) {
      this.pageSize = val
      this.getTeamList()
    },
    // 修改当前页
    changePageNow(val) {
      this.pageIndex = val
      this.getTeamList()
    },
    //解除外网占用
    handleRelieve() {
      unbundleIp(this.$route.query.id)
        .then((data) => {
          if (data.code == 1) {
            this.$Message.success('解除成功')
            // 解除成功刷新配置模式的数据

            this.refreshdata && this.refreshdata()
          } else {
            this.$Message.error(data.message)
          }
        })
        .catch((err) => {})
    },

    //切换外网
    saveSwitch() {
      this.$refs.numberFormRef.validate((viod) => {
        if (viod) {
          this.outerNetFrom.loading = true
          const filter = this.outerNumberList.filter(
            (item) => item.id == this.outerNumberForm.sceneId
          )
          switchOuterIp(filter[0].sceneId, {
            id: filter[0].id,
            oldId: this.oldId
          })
            .then((data) => {
              if (data.code == 1) {
                this.$Message.success('切换成功')
                this.outerModal = false
                this.teamName = ''
              }
              this.outerNetFrom.loading = false
            })
            .catch((err) => {})
        }
      })
    },
    startPolling() {
      this.pollingInterval = setInterval(() => {
        this.getTeamList()
      }, 2000)
    },
    stopPolling() {
      clearInterval(this.pollingInterval)
    },
    cancel() {
      this.$refs.numberFormRef.resetFields()
      this.outerNumberForm.sceneId = ''
      this.outerModal = false
    }
  },
  watch: {
    outerModal: {
      handler(newv, oldv) {
        this.$refs.numberFormRef.resetFields()
      }
    }
  },
  beforeDestroy() {
    this.stopPolling()
  }
}
</script>

<style scoped>
.transfer {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.transfer /deep/ .ivu-transfer-list {
  width: calc(50% - 20px);
  height: 100%;
}
</style>
